<script lang='ts' setup>
import { appRef } from "@/models/app.ref";
import { UpdatePasswordInfo, UserInfo } from "@/models/user";
import { userService } from "@/services/user.service";
import { regExpImage, regExpPassword } from "@/utils/common.methods";
import { ref, defineProps, onMounted } from "vue";

const user = ref({} as UserInfo);
const isAvatar = ref(false);
const password = ref({} as UpdatePasswordInfo);

onMounted(() => {
  user.value = JSON.parse(JSON.stringify(appRef.user.data));
  avatarBlur();
});

function onSave(): void {
  const { uid, avatar, name, nick, birthday, motto, sex } = user.value;
  userService.updatedBaseInfo(uid, nick, birthday, motto, sex, name, avatar);
}

async function avatarBlur(): Promise<void> {
  isAvatar.value = await regExpImage(user.value.avatar);
}

function newPswChange(): void {
  password.value.newPswTips = regExpPassword(password.value.newPsw)
    ? ""
    : "必须包含数字、英文字母、特殊符号且大于等于6位";
  repeatPswChange();
}

function repeatPswChange(): void {
  const { newPsw, repeatPsw } = password.value;
  password.value.repeatPswTips =
    newPsw == repeatPsw ? "" : "两次输入密码不相同";
}
function onUpdatedPassword(): void {
  const { uid } = user.value;
  const { oldPsw, newPsw } = password.value;
  userService.updatedPassword(uid, oldPsw, newPsw);
}
</script>
<template>
  <div class="mine">
    <div class="header flex">
      <div class="baseinfo flex">
        <t-avatar :image="appRef.user.data.avatar" size="100px">{{ (appRef.user.data.nick || 'W')?.slice(0, 1)
        }}</t-avatar>
        <span class="nick"> {{ appRef.user.data.nick || 'W' }} </span>
      </div>
    </div>
    <t-tabs :default-value="1">
      <t-tab-panel :value="1" label="基础信息">
        <div class="form">
          <t-space direction="vertical" size="large" style="width: 100%">
            <t-space direction="vertical" :size="10" style="width: 100%">
              <span>头像</span>
              <t-input v-model:value="user.avatar" @blur="avatarBlur" :status="isAvatar ? '' : 'error'"
                :tips="isAvatar ? '' : '请输入可访问的图片链接'" />
            </t-space>
            <t-space direction="vertical" :size="10" style="width: 100%">
              <span>昵称</span>
              <t-input v-model:value="user.nick" />
            </t-space>
            <t-space direction="vertical" :size="10" style="width: 100%">
              <span>性别</span>
              <t-radio-group variant="default-filled" v-model:value="user.sex">
                <t-radio-button :value="0">女</t-radio-button>
                <t-radio-button :value="1">男</t-radio-button>
              </t-radio-group>
            </t-space>
            <t-space direction="vertical" :size="10" style="width: 100%">
              <span>生日</span>
              <t-date-picker valueType="time-stamp" v-model:value="user.birthday" />
            </t-space>
            <t-space direction="vertical" :size="10" style="width: 100%">
              <span>座右铭</span>
              <t-textarea v-model:value="user.motto" placeholder="请输入内容" />
            </t-space>
            <t-space direction="vertical" :size="10" style="width: 100%">
              <t-button block :disabled="!user.nick || !isAvatar" @click="onSave">保存</t-button>
            </t-space>
          </t-space>
        </div>
      </t-tab-panel>
      <t-tab-panel :value="2" label="安全设置">
        <div class="form">
          <t-space direction="vertical" size="large" style="width: 100%">
            <t-space direction="vertical" :size="10" style="width: 100%">
              <span>旧密码</span>
              <t-input type="password" v-model:value="password.oldPsw" />
            </t-space>
            <t-space direction="vertical" :size="10" style="width: 100%">
              <span>新密码</span>
              <t-input type="password" v-model:value="password.newPsw" @change="newPswChange"
                :status="password.newPswTips ? 'error' : ''" :tips="password.newPswTips" />
            </t-space>
            <t-space direction="vertical" :size="10" style="width: 100%">
              <span>重复新密码</span>
              <t-input type="password" v-model:value="password.repeatPsw" @change="repeatPswChange"
                :status="password.repeatPswTips ? 'error' : ''" :tips="password.repeatPswTips" />
            </t-space>
            <t-space direction="vertical" style="width: 100%">
              <t-button block
                :disabled="!password.oldPsw || !password.newPsw || !password.repeatPsw || !!password.newPswTips || !!password.repeatPswTips"
                @click="onUpdatedPassword">修改密码</t-button>
            </t-space>
            <span>密码已通过 MD5 加密</span>
          </t-space>
        </div>

      </t-tab-panel>
    </t-tabs>

  </div>
</template>
<style lang='scss' scoped>
.mine {
  width: 100%;
  padding: 30px;

  .header {
    width: 100%;
    padding: 16px 32px;
    background: #f2f3f5;
    border-radius: 7px;
    justify-content: space-between;
    margin-bottom: 30px;

    .baseinfo {
      .nick {
        font-size: 17px;
        margin-left: 20px;
      }
    }
  }

  .form {
    margin-top: 30px;
    max-width: 400px;
  }
}</style>